<template>
    <div class="information">
        <!-- 内容区域 -->
        <div class="content-container">
            <!-- 轮播 -->
            <div class="swipe-wrapper">
                <mt-swipe :auto="4000">
                    <mt-swipe-item v-for="item in imgArr">
                        <my-image class="my-img" :imgUrl="soursePath+item.iconurl"></my-image>
                    </mt-swipe-item>
                </mt-swipe>
            </div>
            <div class="dis" :style="{'height':'0.03rem'}"></div>
            <!-- 标题 -->
            <div class="meal-tiltle">
                <p class="title">{{title}}</p>
                <p class="publish-time">发布时间：{{publishTime}}</p>
            </div>
            <!-- 间隔 -->
            <div class="dis" :style="{'height':'0.03rem'}"></div>
            <!-- 活动内容 -->
            <div class="class_title"><span class="class-name">活动内容</span></div>
            <div class="active-info">
                <p class="active-word">{{info}}</p>
            </div>
            <div class="dis" :style="{'height':'0.03rem'}"></div>
            <!-- 活动详情 -->
            <div class="class_title details"><span class="class-name">活动详情</span></div>
            <div class="meal-content" v-html="htmlmsg">
                   
            </div>
        </div>
    </div>
</template>

<script>
import $ from "jquery";
import { Swipe, SwipeItem } from "mint-ui";
import Vue from "vue";
import "mint-ui/lib/swipe/style.css";
import "mint-ui/lib/swipe-item/style.css";
import { mapState } from "vuex";
import myImage from "../lazyloadImg/lazyImage.vue";
import { formatDate } from "../../common/js/date.js";

Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

export default {
  name: "v-information",
  data() {
    return {
      imgArr: null,
      infoid: "",
      title: "",
      publishTime: "",
      info: "",
      htmlmsg: ""
    };
  },
  components: { myImage },
  computed: {
    ...mapState(["path", "role", "userid", "soursePath"]),
    totalPrice() {
      return this.buyNum * this.price;
    }
  },
  created() {
    // document.body.scrollTop = 0;
    this.infoid = this.$route.params.infoid;
    this.getDetailsData();
  },
  methods: {
    getDetailsData() {
      this.$http
        .post(this.path + "store/Goods/goodsmsg", {
          goodsid: this.infoid
        })
        .then(response => {
          let serverData = response.body.result;
          this.imgArr = serverData.imgarr;
          let ginfo = serverData.ginfo;
          this.title = ginfo.gname;
          this.info = ginfo.message;
          this.publishTime = formatDate(new Date(parseInt(ginfo.addtime) * 1000), "yyyy-MM-dd hh:mm");
          this.htmlmsg = this.unescapeHTML(ginfo.htmlmsg);
        })
        .catch(response => {
          console.log(response);
        });
    },
    unescapeHTML: function(a) {
      a = "" + a;
      return a
        .replace(/&lt;/g, "<")
        .replace(/&gt;/g, ">")
        .replace(/&amp;/g, "&")
        .replace(/&quot;/g, '"')
        .replace(/&apos;/g, "'");
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/css/mixin.styl';


.information {
    font-family: 'Microsoft YaHei';
    width: 100%;
    background-color: #FEF2F5;

    .content-container {
        .swipe-wrapper {
            width: 100%;

            .mint-swipe {
                width: 3.2rem;
                height: 1.6rem;

                .my-img {
                    background-color: #f1f1f1;
                    width: 100%;
                    height: 100%;
                }

                .mint-swipe-indicators {
                    bottom: 0.06rem;

                    .mint-swipe-indicator {
                        background-color: #fff;
                        margin: 0 0.05rem;
                        opacity: 0.4;
                    }

                    .mint-swipe-indicator.is-active {
                        background-color: #fff;
                        opacity: 0.9;
                    }
                }
            }
        }

        .class_title {
            position: relative;
            background: url('../../assets/class_bg.png') no-repeat;
            background-size: 100%;
            height: 0.35rem;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            margin-top: 0.02rem;

            &.details {
                box-shadow: 0 1px 0 rgba(236, 118, 154, 0.2);
            }

            .class-name {
                color: #f2a5ba;
                font-size: 0.15rem;
                letter-spacing: 0.01rem;
            }
        }

        .active-info {
            padding: 0.24rem 0.12rem 0.48rem 0.12rem;
            background-color: #f8cbd6;
            box-sizing: border-box;

            .active-word {
                text-indent: 0.2rem;
                font-size: 0.13rem;
                line-height: 0.19rem;
                color: #727171;
            }
        }

        .meal-tiltle {
            padding: 0.1rem 0.12rem 0.12rem 0.12rem;
            box-sizing: border-box;

            .title {
                letter-spacing: 0.01rem;
                font-size: 0.2rem;
                color: #303030;
                line-height: 0.3rem;
            }

            .publish-time {
                font-size: 0.13rem;
                color: #8a8a8a;
                margin-top: 0.01rem;
            }
        }

        .dis {
            background-color: #fafafa;
        }

        .meal-content {
            padding .1rem .14rem 0 .14rem;
            box-sizing border-box;
            img{
                width:100%;
                height auto;
            }
        }
    }
}
</style>